import React from 'react';
import style from './index.css'
import { connect } from 'react-redux';
import { commonNum } from "@react/redux/common/action.js";
import Headers from "@react/components/header/index.jsx";
class RankingList extends React.Component {
  state = {
    nowTime: '',
  };
  constructor(...props) {//构建函数 created  
    super(...props); //需要手动调用
    this.state.nowTime = new Date().format("yyyy-MM-dd hh:mm:ss")
  };
  static getDerivedStateFromProps(props, state) {
    //组件每次被render的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后;
    //每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state
    return state //如果声明需要return state（修改后的state）
  }
  componentDidCatch(error, info) { // 获取到javascript错误

  }
  componentDidMount() { // DOM挂载后，已经渲染了

  }
  shouldComponentUpdate(newProps, newState) { // 组件发生了更新
    return newState; //如果声明需要return newState（修改后的state）
  }
  getSnapshotBeforeUpdate(prevProps, prevState) { // 组件更新前触发
    return prevState  //如果声明需要return prevState（修改后的state）
  }
  componentDidUpdate(prevProps, prevState) { // 组件完成更新

  }
  componentWillUnmount() { // 组件被卸载

  }
  skip() {
    this.props.history.push({ //4种跳转传参方式
      // pathname: '/box',
      pathname: '/box/' + this.state.nowTime,
      search: '?time=' + this.state.nowTime,
      query: {
        time: this.state.nowTime
      },
      state: {
        time: this.state.nowTime
      }
    });
  };
  goBack(){
    console.log(this.state.nowTime)
  };
  render() {
    const state = this.state
    const props = this.props
    return (
      <div>
        <Headers name='首页' isReturn="true" goBack={this.goBack.bind(this)}></Headers>
        <div className={style.box}>
          <div>
            {state.nowTime}
          </div>
          <div>
            {props.num}
          </div>
          <div onClick={props.add.bind(this, props.num)}>
            加
          </div>
          <div onClick={props.min.bind(this, props.num)}>
            减
          </div>
          <div onClick={this.skip.bind(this)}>跳转</div>
        </div>
      </div>
    )
  };
};
function mapDispatchToProps(dispatch) {
  return {
    add: (num) => {
      num++;
      dispatch(commonNum(num))
    },
    min: (num) => {
      num--;
      dispatch(commonNum(num))
    },
  }
}
export default connect((state, props) => {
  return {
    num: state.common.commonNumReducer
  }
}, mapDispatchToProps)(RankingList);